<template>
  <view class="fu-swiper">
    <swiper
      :class="[
        'fu-swiper__wrapper',
        { 'fu-swiper__wrapper--card': card }
      ]"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      :circular="circular"
      :vertical="vertical"
      :current="current"
      :previous-margin="card ? '50rpx' : '0'"
      :next-margin="card ? '50rpx' : '0'"
      @change="onChange"
    >
      <swiper-item 
        v-for="(item, index) in list"
        :key="index"
        :class="[
          'fu-swiper__item',
          { 'fu-swiper__item--card': card }
        ]"
      >
        <image 
          :src="item.image"
          :mode="imageMode"
          :class="[
            'fu-swiper__image',
            { 'fu-swiper__image--card': card }
          ]"
          :style="card ? {
            transform: `scale(${current === index ? 1 : scale})`
          } : {}"
          @click="onClick(item, index)"
        />
      </swiper-item>
    </swiper>
    
    <!-- 指示器 -->
    <view 
      v-if="indicator"
      :class="[
        'fu-swiper__indicator',
        `fu-swiper__indicator--${indicatorType}`,
        `fu-swiper__indicator--${indicatorPosition}`
      ]"
    >
      <view 
        v-for="(item, index) in list"
        :key="index"
        :class="[
          'fu-swiper__dot',
          { 'fu-swiper__dot--active': current === index }
        ]"
      >
        <text v-if="indicatorType === 'number'">{{ index + 1 }}</text>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * fu-swiper 轮播图组件
 * @description 用于展示轮播图内容
 * @property {Array} list - 轮播图数据
 * @property {Boolean} autoplay - 是否自动播放
 * @property {Number} interval - 自动播放间隔时间
 * @property {Number} duration - 滑动动画时长
 * @property {Boolean} circular - 是否循环播放
 * @property {Boolean} vertical - 是否垂直滚动
 * @property {String} imageMode - 图片裁剪模式
 * @property {Boolean} indicator - 是否显示指示器
 * @property {String} indicatorType - 指示器类型，可选值：dot/line/number
 * @property {String} indicatorPosition - 指示器位置，可选值：center/right
 * @event {Function} click - 点击时触发
 * @event {Function} change - 切换时触发
 */
export default {
  name: 'fu-swiper',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    card: {
      type: Boolean,
      default: false
    },
    scale: {
      type: Number,
      default: 0.9
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 3000
    },
    duration: {
      type: Number,
      default: 500
    },
    circular: {
      type: Boolean,
      default: true
    },
    vertical: {
      type: Boolean,
      default: false
    },
    imageMode: {
      type: String,
      default: 'aspectFill'
    },
    indicator: {
      type: Boolean,
      default: true
    },
    indicatorType: {
      type: String,
      default: 'dot',
      validator: value => ['dot', 'line', 'number'].includes(value)
    },
    indicatorPosition: {
      type: String,
      default: 'center',
      validator: value => ['center', 'right'].includes(value)
    }
  },
  emits: ['click', 'change'],
  data() {
    return {
      current: 0
    }
  },
  methods: {
    onClick(item, index) {
      this.$emit('click', { item, index })
    },
    onChange(event) {
      this.current = event.detail.current
      this.$emit('change', event.detail)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-swiper {
  position: relative;
  width: 100%;
  
  &__wrapper {
    width: 100%;
    height: 400rpx;
    
    &--card {
      box-sizing: border-box;
    }
  }
  
  &__item {
    width: 100%;
    height: 100%;
    
    &--card {
      padding: 0 10rpx;
      box-sizing: border-box;
    }
  }
  
  &__image {
    width: 100%;
    height: 100%;
    
    &--card {
      border-radius: var(--fu-radius-base);
      transition: all 0.2s ease;
    }
  }
  
  &__indicator {
    position: absolute;
    bottom: 20rpx;
    display: flex;
    align-items: center;
    
    &--center {
      left: 50%;
      transform: translateX(-50%);
    }
    
    &--right {
      right: 20rpx;
    }
    
    &--dot {
      .fu-swiper__dot {
        width: 12rpx;
        height: 12rpx;
        margin: 0 8rpx;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.4);
        transition: all 0.2s ease;
        
        &--active {
          width: 24rpx;
          border-radius: 12rpx;
          background-color: #fff;
        }
      }
    }
    
    &--line {
      .fu-swiper__dot {
        width: 40rpx;
        height: 6rpx;
        margin: 0 8rpx;
        background-color: rgba(255, 255, 255, 0.4);
        transition: all 0.2s ease;
        
        &--active {
          background-color: #fff;
        }
      }
    }
    
    &--number {
      padding: 4rpx 20rpx;
      border-radius: 100rpx;
      background-color: rgba(0, 0, 0, 0.3);
      
      .fu-swiper__dot {
        display: none;
        
        &--active {
          display: block;
          color: #fff;
          font-size: 24rpx;
          
          &::after {
            content: '/' attr(data-total);
            margin-left: 4rpx;
            opacity: 0.7;
          }
        }
      }
    }
  }
}
</style> 